{% extends  'base.html' %}
        
{% block content %}

	<h1>{{ collection.name }}</h1>
	<p>{{ collection.description }}</p>
	
	<div class="actions ">
		<div class="float_left"><a href="/categories/new"><img src="/static/images/category_new.png" alt="Nova categoria" /> Nova Categoria</a></div>
		<div class="float_left"><a href="/collections/{{collection_id}}/uidps/add/"><img src="/static/images/uidp_new.png" alt="Adicionar UIDP" /> Adicionar UIDP</a></div>
		<div class="float_left"><a href="/collections/{{collection_id}}/uidps/select/"><img src="/static/images/uidp_new.png" alt="Selecionar UIDP" /> Selecionar UIDP</a></div>
	</div>
	<div class="clearfloat"></div>
	<br/>
	
	<div>
		<div class="categories">
			{% ifequal category_id 0 %}
				<div><p class="selected"><a href="/collections/{{collection.id}}">Todas</a></p></div>
			{% else %}
				<div><p><a href="/collections/{{collection.id}}">Todas</a></p></div>
			{% endifequal %}
			
			{% for c in categories %}
			<div>
				{% ifequal c.id category.id %}
					<p class="selected"><a href="/collections/{{collection.id}}/categories/{{c.id}}">{{ c.name }}</a></p>
				{% else %}
					<p><a href="/collections/{{collection.id}}/categories/{{c.id}}">{{ c.name }}</a></p>
				{% endifequal %}
			</div>												
			{% endfor %}
		</div>
		
		<div class="boxes float_left">
		{% for uidp in uidps %}
			{% if forloop.counter|divisibleby:"4" %}
				<ul>
			{% endif %}
				<li>
	            	<!-- img src="/static/images/siteBackground.jpg" alt="{{uidp.name}}"-->
	            	<h2>{{uidp.UIDP}}</h2>
					<p class="font_small">{{uidp.problem.action}} {{uidp.problem.object}} {{uidp.problem.complement}}</p>            		
	                <a href="/collections/{{collection.id}}/uidps/{{uidp.id}}"><button class='button'>+</button></a>
	            </li>
			{% if forloop.counter|divisibleby:"4" %}
				</ul>
			{% endif %}
		{% endfor %}
		{% if not uidps %}
			<p class="no_item">Não há padrões de interface nesta categoria.</p>
		{% endif %}
		</div>
		<div class="clearfloat"></div>
	</div>
				
{% endblock %}